<template>
  <div class="app-container">
    <el-card>
      <h4 v-if="activities.length===0" style="text-align: center">暂时还没有数据……</h4>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :icon="weekStyle[new Date(activity.inDate).getDay()].icon"
          :color="weekStyle[new Date(activity.inDate).getDay()].color"
          size="large"
          :timestamp="activity.inDate"
          placement="top"
        >
          <mavon-editor
            :value="activity.description"
            class="mavon-editor"
            :subfield="false"
            :default-open="'preview'"
            :editable="false"
            :toolbars-flag="false"
            :ishljs="true"
          />
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { getEmail } from '@/utils/auth'
import { teamDataList } from '@/api/team'

export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      teamId: 0,
      activities: [{
        description: '闪光灯和沙特等国',
        inDate: '2021-05-02'
      }],
      weekStyle: [
        { color: '#296939', icon: 'el-icon-goods' },
        { color: '#0b2d64', icon: 'el-icon-bell' },
        { color: '#dad6ab', icon: 'el-icon-s-order' },
        { color: '#730099', icon: 'el-icon-s-cooperation' },
        { color: '#d70419', icon: 'el-icon-s-check' },
        { color: '#02b340', icon: 'el-icon-s-claim' },
        { color: '#f3aa58', icon: 'el-icon-more' }
      ]
    }
  },
  created() {
    if (this.$route.query.teamId !== undefined) {
      this.teamId = this.$route.query.teamId
      this.teamDataList()
    }
  },
  methods: {
    teamDataList() {
      teamDataList({ teamId: this.teamId, email: getEmail() }).then(res => {
        this.activities = res.data
      })
    }
  }
}
</script>

<style scoped>
.mavon-editor {
  min-height: 50px;
  border: 2px solid #e7eff7;
  background-color: #e7eff7;
  box-shadow: 0 0 0 #fff;
}
::v-deep .el-timeline-item__timestamp{
  font-size: 16px;
}
::v-deep .el-timeline-item__node--large{
  left: -10px;
  width: 30px;
  height: 30px;
}
</style>
